<template>
  <div id="personal">
    <div class="self-info center">

      <!-- sidebar -->
      <div class="lfnav fl">
        <div class="nav_title">个人中心</div>
        <div class="title_list">
          <ul>
            <li> <router-link to="/mall/personal" class="active">个人信息</router-link></li>
            <li><router-link to="/mall/myorder">我的订单</router-link></li>
            <li> <router-link to="/body" @click="logout">退出登录</router-link></li>
          </ul>
        </div>
      </div>

      <div class="intro fr">
        <div class="uc-box uc-main-box">
          <div class="uc-content-box order-view-box">
            <div class="box-hd">
              <h1 class="title">订单详情
                <small>请谨防钓鱼链接或诈骗电话，<a href="##">了解更多&gt;</a>
                </small>
              </h1>
              <div class="more clearfix">
                <h2 class="subtitle">订单号：
                  {{ $route.query.orderNo }}
                  <span class="tag tag-subsidy"></span>
                </h2>
                <div class="actions" v-if="payStatus == 1">
                  <a @click="payOrder" class="btn btn-small btn-primary" title="去支付">去支付</a>
                </div>
              </div>
            </div>
            <div class="box-bd">
              <div class="uc-order-item uc-order-item-pay">
                <div class="order-detail">

                  <div class="order-summary" v-if="payStatus == 1">
                    <div class="order-status">待支付</div>
                    <div class="order-desc">
                      请尽快完成支付哦~
                    </div>
                    <div class="order-progress">
                      <el-steps :active="1" finish-status="success" simple style="margin-top: 2px">
                        <el-step title="下单" />
                        <el-step title="付款" />
                        <el-step title="配货" />
                        <el-step title="出库" />
                        <el-step title="交易成功" />
                      </el-steps>
                    </div>
                  </div>
                  <div class="order-summary" v-if="payStatus == 2">
                    <div class="order-status">已支付</div>
                    <div class="order-desc">
                      商城订单确认中
                    </div>
                    <div class="order-progress">
                      <el-steps :active="2" finish-status="success" simple style="margin-top: 2px">
                        <el-step title="下单" />
                        <el-step title="付款" />
                        <el-step title="配货" />
                        <el-step title="出库" />
                        <el-step title="交易成功" />
                      </el-steps>
                    </div>
                  </div>
                  <table class="order-items-table">
                    <tbody>
                      <tr>
                        <td class="col col-thumb">
                          <div class="figure figure-thumb">
                            <a target="_blank" href="##">
                              <img :src="goods.goodsDetail.goodsCoverImg" width="80" height="80" alt="">
                            </a>
                          </div>
                        </td>
                        <td class="col col-name">
                          <p class="name">
                            {{ goods.goodsDetail.goodsName }}
                          </p>
                        </td>
                        <td class="col col-price">
                          <p class="price">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ goods.goodsDetail.sellingPrice }}元 x 1
                          </p>
                        </td>
                        <td class="col col-actions">
                        </td>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                      </tr>

                    </tbody>
                  </table>
                </div>

                <div id="editTime" class="order-detail-info">
                  <h3>支付方式</h3>
                  <table class="info-table">
                    <tbody>
                      <tr>
                        <th>支付方式：</th>
                        <td>在线支付</td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="actions">
                  </div>
                </div>
                <div class="order-detail-total">
                  <table class="total-table">
                    <tbody>
                      <tr>
                        <th>运费：</th>
                        <td><span class="num">0</span>元</td>
                      </tr>
                      <tr>
                        <th class="total">商品总价：</th>
                        <td class="total"><span class="num">{{ goods.goodsDetail.sellingPrice }}.00</span>元
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import '../../assets/mall/styles/personal.css'
import '../../assets/mall/styles/addresses.css'
import '../../assets/mall/styles/my-orders.css'
import '../../assets/mall/styles/order-detail.css'
import '../../assets/mall/css/common.css'
import Store from '../../stores/Store.js'
import axios from 'axios'
export default {
  data() {
    return {
      goods: Store(),
      payStatus: 0
    }
  },
  methods: {
    payOrder() {
      console.log(this.$route.query.orderNo);
      console.log(this.total);
      window.open('http://localhost:8080/alipay/pay?subject=只因订单&traceNo=' + this.$route.query.orderNo + '&totalAmount=' + this.goods.goodsDetail.sellingPrice)
    },
    logout() {

      this.user.token = 0
      this.user.cartNumber = 0
      /* 导航守卫 退出设置为false */
      sessionStorage.setItem("isLogin", false);
      this.$router.push('/login')
    },
  },
  created() {
    axios.post('http://localhost:8080/order/payStatus/' + this.$route.query.orderNo).then(resp => {
      this.payStatus = resp.data
    })
  },
}
</script>

<style scoped></style>